<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
    />
    <div style="width: 100%; height: 50px"></div>

    <!-- 菜单栏 -->
    <van-checkbox-group v-model="selGoods">
      <van-swipe-cell v-for="(item, index) in cartlist" :key="index">
        <van-row>
          <van-col span="2" class="leftbox">
            <van-checkbox :name="item"></van-checkbox>
          </van-col>
          <van-col span="22">
            <van-card
              :price="item.price"
              :title="item.title"
              class="goods-card"
              thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
            >
              <template #num>
                <van-stepper v-model="item.num" />
              </template>
            </van-card>
          </van-col>
        </van-row>

        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            style="height: 100%"
            @click="delcard(item, index)"
          />
        </template>
      </van-swipe-cell>
    </van-checkbox-group>
    <div style="width: 100%; height: 50px"></div>
    <!-- 底部 -->
    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="selAll" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      selAll: false,
      selGoods: [],
      total: 0,
      cartlist: [
        {
          num: 2,
          price: 200,
          title: "男装",
        },
        {
          num: 3,
          price: 100,
          title: "女装",
        },
        {
          num: 2,
          price: 50,
          title: "玩具",
        },
        {
          num: 2,
          price: 150,
          title: "高达",
        },
        {
          num: 2,
          price: 200,
          title: "电子手表",
        },
        {
          num: 2,
          price: 500,
          title: "耳机",
        },
        {
          num: 2,
          price: 3000,
          title: "华为手机",
        },
        {
          num: 2,
          price: 10000,
          title: "Mac本",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      // console.log("返回到列表页了");
      // this.$router.push("/home")
      this.$router.go(-1)
    },
    onClickRight() {
      this.$router.push("/home");
    },
    onSubmit() {
      this.$router.push("/trade");
    },
    checkAll() {
      if (this.selAll) {
        this.selGoods = this.cartlist;
      } else {
        this.selGoods = [];
      }
    },
    delcard(item, index) {
      this.$dialog
        .confirm({
          message: `您确定要删除${item.title}吗?`,
        })
        .then(() => {
          this.cartlist.splice(index, 1);
          let i = this.selGoods.indexOf(item);
          console.log(i);
          if (i != -1) {
            this.selGoods.splice(i, 1);
          }
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  watch: {
    selGoods: {
      handler(arr) {
        this.total = 0;
        arr.forEach((item) => {
          // console.log(item.num*item.price)
          this.total += item.num * item.price * 100;
        });

        if (arr.length === this.cartlist.length) {
          this.selAll = true;
        } else {
          this.selAll = false;
        }
      },
      deep: true,
    },
  },
};
</script>
  
  
  <style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-row {
  margin: 10px 0px;
}
.leftbox {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
  
  
>>>>>>> Stashed changes
